<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第十七章</title>
    <link rel="stylesheet" href="../bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="../bootstrap-3.4.1-dist/js/jquery-3.6.1.js"></script>
    <script src="../bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>
<style>
    .wrapper{
        margin: 0 auto;
        width: 800px;
    }
    .top{
        margin-top: 50px;
    }
    a:visited {
        color: grey;
    }
</style>
<body>
<div class="panel-group wrapper top" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
                   aria-expanded="true" aria-controls="collapseOne">
                    1. HTML5 Web Storage: localStorage | sessionStorage | IndexedDB
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
            <ul class="list-group">
                <li class="list-group-item"><a href="edu_17_1_1.html">【例17-1-1】localStorage对象的应用。</a></li>
                <li class="list-group-item"><a href="edu_17_1_2.html">【例17-1-2】localStorage对象实现的简易通讯录。</a></li>
                <li class="list-group-item"><a href="edu_17_1_3.html">【例17-1-3】创建数据库、仓库(相当于表)、输入对象(相当于记录)。</a></li>
                <li class="list-group-item"><a href="edu_17_1_3_1.html">【例17-1-3-1】IndexedDB管理客户端数据-简易图书管理系统。</a></li>
                <li class="list-group-item"><a href="edu_17_1_4.html">【例17-1-4】为books对象仓库按标题(title)和作者(author)建立索引。</a></li>
                <li class="list-group-item"><a href="edu_17_1_5.html">【例17-1-5】为books、press对象仓库创建一个读写事务。</a></li>
                <li class="list-group-item"><a href="edu_17_1_6.html">【例17-1-6】将已定义的三个对象添加到books对象仓库中。</a></li>
                <li class="list-group-item"><a href="edu_17_1_7.html">【例17-1-7】不使用索引,直接使用游标遍历数据。</a></li>
                <li class="list-group-item"><a href="edu_17_1_8.html">【例17-1-8】使用IDBKeyRange对象生成range对象的各种情形。</a></li>
                <li class="list-group-item"><a href="edu_17_1_9.html">【例17-1-9】按姓名的开始字母范围(B～D)来检索数据。</a></li>
                <li class="list-group-item"><a href="edu_17_1_10.html">【例17-1-10】使用IndexedDB实现学生基本信息采集系统。</a></li>
            </ul>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"
                   aria-expanded="false" aria-controls="collapseTwo">
                    2. HTML5 Canvas画布
                </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <ul class="list-group">
                <li class="list-group-item"><a href="edu_17_2_1.html">【例17-2-1】用canvas标记绘制矩形。</a></li>
                <li class="list-group-item"><a href="edu_17_2_2.html">【例17-2-2】用Canvas标记绘制圆形。</a></li>
                <li class="list-group-item"><a href="edu_17_2_3.html">【例17-2-3】用Canvas绘制直线 .moveTo(x0,y0); .lineTo(x1,y1);。</a>
                <li class="list-group-item"><a href="edu_17_2_4.html">【例17-2-4】综合运用Canvas绘制文本、图像、渐变。</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingThree">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"
                   aria-expanded="false" aria-controls="collapseThree">
                    3. HTML5 拖放
                </a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            <ul class="list-group">
                <li class="list-group-item"><a href="edu_17_3_1.html">【例17-3-1】HTML5拖放图像应用。</a></li>
            </ul>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="heading4">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse4"
                   aria-expanded="true" aria-controls="collapse4">
                    4. HTML5 Web Worker
                </a>
            </h4>
        </div>
        <div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading4">
            <ul class="list-group">
                <li class="list-group-item"><a href="edu_17_4_1.html">【例17-4-1】HTML5 WebWorker多线程实现每隔1s随机产生1组10个100以内的两</a></li>
            </ul>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="heading5">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse5"
                   aria-expanded="true" aria-controls="collapse5">
                    5. 综合实例
                </a>
            </h4>
        </div>
        <div id="collapse5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading5">
            <ul class="list-group">
                <li class="list-group-item"><a href="edu_17_5_1.html">【例17-5-1】综合实例---利用IndexedDB实现简易图书管理系统。</a></li>
            </ul>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="heading6">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse6"
                   aria-expanded="true" aria-controls="collapse6">
                    习题实验
                </a>
            </h4>
        </div>
        <div id="collapse6" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading6">
            <ul class="list-group">
                <li class="list-group-item"><a href="exp_17_1.html">【实验17-1】运用HTML5 Web本地存储设计简易手机通讯录。</a></li>
            </ul>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="heading8">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse8"
                   aria-expanded="true" aria-controls="collapse8">
                    返回首页
                </a>
            </h4>
        </div>
        <div id="collapse8" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading8">
            <ul class="list-group">
                <li class="list-group-item"><a href="../index.html"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span> 返回首页</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>
